<template>
    <div class="boxContentCss">
        <EdCreateCard title="装修信息">
            <template #back>
                <div class="createBack" @click="$utilsSet.goBack(router)" >
                    <svg-icon icon-class="back" /> 返回
                </div>
            </template>
            <el-form ref="formRef" :model="form" label-position="right" label-width="130px" style="padding:15px;">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="房号"  prop="roomId" :rules="$validate.validates({required:true,msg:'房号不能为空',trigger: ['blur', 'change'] })">
                            <EdLazyCascader style="width:100%" ref="edLazyCascader" :houseRentParams="data.houseRentParams" placeholder="小区/分期/楼栋/单元/房间" leafLevel="4" @emit-cascader-value="emitCascaderValue"></EdLazyCascader>
                            <!-- <HousePicker class="mr-2" ref="housePicker" multiple v-model="form.rooms" @input="houseInput"/> -->
                        </el-form-item>
                    </el-col>  
                    <el-col :span="6">  
                        <el-form-item label="联系人"  prop="contactsName" :rules="$validate.validates({required:true,msg:'联系人不能为空'})">
                            <el-input class="flex-input phoneStyle" v-model="form.contactsName" placeholder="联系人"></el-input>
                        </el-form-item>
                    </el-col>  
                    <el-col :span="6">  
                        <el-form-item label="联系电话"  prop="contactsPhone" :rules="$validate.validates({required:true,msg:'联系电话不能为空',type:'mobile'})">
                            <el-input class="flex-input phoneStyle" v-model="form.contactsPhone" placeholder="联系电话"></el-input>
                        </el-form-item>
                    </el-col>   
                </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="施工时间"  prop="pickerTime" :rules="$validate.validates({required:true,msg:'施工时间不能为空'})">
                            <EdDateTimePickerRange v-model="form.pickerTime"  
                                @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')" 
                                style="width:100%"
                                :pickerParams="data.pickerRangeParams"></EdDateTimePickerRange>
                        </el-form-item>
                    </el-col>   
                </el-row>
                <el-row>
                    <el-col :span="12">  
                        <el-form-item label="施工内容"  prop="details" :rules="$validate.validates({required:true,msg:'施工内容不能为空'})">
                            <el-input placeholder="请输入施工内容描述" type="textarea" v-model="form.details" :rows="6"  maxlength="200" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                     <el-col :span="6">
                        <el-form-item label="垃圾清理运费"  prop="cleanFee" :rules="$validate.validates({required:true,msg:'垃圾清理运费不能为空'})">
                            <el-input class="flex-input phoneStyle" v-model="form.cleanFee" placeholder="垃圾清理运费">
                                <span slot="suffix">元</span>
                            </el-input>
                        </el-form-item>
                    </el-col>  
                    <el-col :span="6">  
                        <el-form-item label="装修保证金"  prop="earnestMoney" :rules="$validate.validates({required:true,msg:'装修保证金不能为空'})">
                            <el-input class="flex-input phoneStyle" v-model="form.earnestMoney" placeholder="装修保证金">
                                <span slot="suffix">元</span>
                            </el-input>
                        </el-form-item>
                    </el-col>    
                </el-row>
                <el-form-item class="form_btns">
                    <el-button class="ed-button ed_black-bottom" @click="onSubmit()" :loading="data.disabled">确定</el-button>
                    <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack(router)">取消</el-button>
                </el-form-item>
            </el-form>
        </EdCreateCard>
    </div>
</template>

<script setup>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdDateTimePickerRange from 'src/components/EdDateTimePickerRange.vue'
    import HousePicker from 'src/components/HousePicker/index.vue'
    import EdLazyCascader from 'src/components/EdLazyCascader.vue'
    import {onActivated, onDeactivated, reactive,ref } from 'vue'
    import * as api from "./api";
    import message from 'src/utils/once-message'
    import router from 'src/router'

    const form = reactive({
        roomId:'',
        villageId: '',
        contactsName: '',
        pickerTime:[],
        startTime: '',
        endTime: '',
        details: '',
        cleanFee: '',
        earnestMoney: '',
        contactsPhone: '',
    })
    const formRef = ref()
    const edLazyCascader = ref()
    const data = reactive({
        pickerRangeParams:{
            valueFormat:"yyyy-MM-dd HH:mm"
        },
        isUpdate: false,
        disabled: false,
        houseRentParams:{
            options: [],
        },
        roomId:[]
    })
    onActivated(()=>{
        if(router.currentRoute.query.id){
            data.isUpdate = true
            info();
        } else {
            // 新增
            data.isUpdate = false
        }
    })
    onDeactivated(()=>{
        Object.assign(form,{})
        formRef.value.resetFields()
    })
    function info(){
        info({id:router.currentRoute.query.id}).then(res => {
            if(res.success) {
                form = {
                    villageId: res.data.villageId.toString(),
                    rooms: res.data.rooms,
                    contactsName: res.data.contactsName,
                    pickerTime: res.data.pickerTime,
                    details: res.data.details,
                    cleanFee: res.data.cleanFee,
                    earnestMoney: res.data.earnestMoney   ,
                };
            }
        })
    }
    function onSubmit(){
        formRef.value.validate((valid) => {
            if(valid){
                // form.roomId = data.roomId[0]
                    api.add(form).then(response => {
                        if(response.code == 20000) {
                            data.disabled = false;
                            message.success({
                                message: '添加成功',
                                center: true,
                                duration: 2000,
                            });
                            edLazyCascader.value.reset()
                            formRef.value.resetFields()
                            window.setTimeout(() => {
                                this.$utilsSet.goBack(router);
                            }, 600)
                        } else {
                            data.disabled = false
                        }
                    }).catch(()=>{
                        data.disabled = false
                    })
            }
        })
    }
    function emitEchoTimeDate(data){
        // $event 子组件$emit传的参数 
        form['startTime'] = data.startTime;
        form['endTime'] = data.endTime;
    }
    function emitCascaderValue(data){
        form.villageId = data[0];
        form.roomId = data[4];
        // let arr = [];
        // arr.push(data&&data[data.length-1]);
        // data.roomId = arr;
        // console.log('444',form.roomId);
    }
</script>

<style scoped lang="scss">
    
</style>